<template>
    <div id="WindowsContingencyPlan">
        <el-card>
            <template #header>
            <div style="display: flex; align-items: center;justify-content: space-between;">
                <el-button-group>
                    <el-button @click="addDateFilter" size="large" type="primary">新增</el-button>
                    <el-button @click="editFilter" size="large" type="info">编辑</el-button>
                </el-button-group>
                <el-button @click="history" size="large" type="info">历史发布</el-button>
            </div>
            </template>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef"  v-loading="loading">
                <el-table-column type="selection" width="55" />
                <el-table-column label="方案标题" width="200">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.ryD_ContingencyPlanTitle }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="方案说明" width="250">
                    <template #default="scope">
                        {{ scope.row.ryD_ContingencyPlanExplain }}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="200">
                    <template #default="scope">
                        {{ dateTimeSpan(scope.row.ryD_CreateTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="默认接收人" width="250">
                    <template #default="scope">
                        <el-popover effect="light" trigger="hover" placement="top" width="auto"
                            v-for="item in scope.row.ryD_DefaultUsers" :key="item">
                            <template #default>
                                <div>姓名: {{ item.realName }}</div>
                                <div>工号: {{ item.ryD_RyderNo }}</div>
                            </template>
                            <template #reference>
                                <el-tag size="large">{{ item.realName }}</el-tag>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="创建人" width="100">
                    <template #default="scope">
                        <el-popover effect="light" trigger="hover" placement="top" width="auto">
                            <template #default>
                                <div>姓名: {{ scope.row.ryD_CreateBy.realName }}</div>
                                <div>工号: {{ scope.row.ryD_CreateBy.ryD_RyderNo }}</div>
                            </template>
                            <template #reference>
                                <el-tag size="large">{{ scope.row.ryD_CreateBy.realName }}</el-tag>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  fixed="right" width="120">
                    <template #default="scope">
                        <el-button size="large" type="success" @click="announced(scope.$index, scope.row)">进行发布</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup >

import { useRouter } from 'vue-router';
import axios from '@/utils/axios'
import { ref } from 'vue';
import dateTimeSpan from '@/utils/dateTime';
import { ElMessageBox } from 'element-plus';

const router = useRouter();

const tableData = ref([]);


const multipleTableRef = ref();

const loading = ref(true)


axios({
    method: 'get',
    url: "/api/GetContingencyPlanTable"
}).then(res => {
    tableData.value = res;
    loading.value=false;
})

const announced = (index, row) => {
    
    router.push({
        name: 'WindowsContingencyPlanOperation',
        query: {
            ContingencyPlanNo:row.ryD_ContingencyPlanNo,
            Type:2
        },
    });
}
const addDateFilter = () => {
    router.push("WindowsContingencyPlanOperation");
}

const history = () => {
    router.push("WindowsContingencyPlanHistory");
}

const editFilter = () => {
    var selectionRow = multipleTableRef.value.getSelectionRows();
    if(selectionRow.length>1){
        ElMessageBox.alert('只能勾选一条记录', '提示');
        return;
    }
    if(selectionRow.length<1){
        ElMessageBox.alert('请勾选一条记录', '提示');
        return;
    }
    router.push({
        name: 'WindowsContingencyPlanOperation',
        query: {
            ContingencyPlanNo:selectionRow[0].ryD_ContingencyPlanNo,
            Type:1
        },
    });

}
</script>

<style>
#WindowsContingencyPlan .el-checkbox__inner {
    width: 20px;
    height: 20px;
}

#WindowsContingencyPlan .el-checkbox__inner::after {
    width: 6px;
    height: 10px;
    left: 5px;
}

#WindowsContingencyPlan .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
    height: 3px;
    top: 7px;
}
</style>